@import './sass/variable';

.task-cont{
	padding: 10rem / $baseFontSize;

	&>ul{
		&>li{
			
			background-color: #fff;
			
			
			p{
				border: 1px solid #DFE4DE;
				padding: 15rem / $baseFontSize;
				position: relative;
				border-top: 5px solid $priGreen;
				border-top-left-radius: 5rem / $baseFontSize;
				border-top-right-radius: 5rem / $baseFontSize;

				span{
					position: absolute;
					right: 40rem / $baseFontSize;
				}
			}

			i{
				float: right;
				padding-top: 3px;
			}

			ul{
				display: none;
				padding: 0 10rem / $baseFontSize;
				li{
					padding: 12rem / $baseFontSize 2rem / $baseFontSize;
					border-bottom: 1px dashed $borColor;
					position: relative;

					b{
						position: absolute;
						right: 45%;
					}
					&>span{
						float: right;
					}
				} 
			}
			
			&:first-child{
				ul{
					display: block;
				}
			}
			
			&+li{
				margin-top: 10rem / $baseFontSize;
			}
		}
	}

	.task-top{
		padding: 10rem / $baseFontSize 15rem / $baseFontSize;	
		border-bottom: 1px solid #DFE4DE;

		h2{
			font-size: 18rem / $baseFontSize;
			display: inline-block;
			margin-top: 3rem / $baseFontSize
		}

		p{
			font-size: 18rem / $baseFontSize;
			display: inline-block;

			span{
				font-size: 24rem / $baseFontSize;
				color: #007B32;
			}
		}
	}

	.task-bottom{
		padding: 10rem / $baseFontSize 15rem / $baseFontSize;
		position: relative;

		p.task-date{
			font-size: 16rem / $baseFontSize;
			color: #666666;

			&+p{
				padding: 10rem / $baseFontSize 0;
				font-size: 16rem / $baseFontSize;
				color: #666666;

				span{
					display: inline-block;
					width: 25rem / $baseFontSize;
					height: 25rem / $baseFontSize;
					border-radius: 50%;
					background: #75B428;
					text-align: center;
					line-height: 25rem / $baseFontSize;
					color: #fff;
					font-size: 14rem / $baseFontSize;
					margin-right: 10rem / $baseFontSize;
				}
			}
		}

		i{
			position: absolute;
			font-size: 26rem / $baseFontSize;
			right: 20rem / $baseFontSize;
			top: 30rem / $baseFontSize;
			color: #B0BBC5;
		}
	}

	
}
.tasked{
	label{
		margin-bottom: 10rem / $baseFontSize;
	}
}
.stateTask{
    display: inline-block;
    width: 60%;
    text-align: left;
    margin-top: 6rem / $baseFontSize;
    margin-bottom: 5rem / $baseFontSize;

    i{
    	float: right;
    	font-size: 18rem / $baseFontSize;
    }
}